<template>
  <div>
    <el-dialog width="400" :title="dialogTitle" v-model="dialogVisible" modal @close="closeDialog" draggable
      :close-on-click-modal="false" :append-to-body="true">
      <el-form class="dialog-form" :model="formData" ref="ruleForm" label-position="right" label-width="80px"
        size="medium" @submit.native.prevent :rules="formRules">
        <el-form-item label="部门名称" prop="departName">
          <el-input v-model="formData.departName" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="parentId">
          <tree-select v-model="formData.parentId" :normalizer="tenantIdnormalizer" :options="deptOptions"
            :show-count="true" placeholder="请选择所属部门" />
        </el-form-item>
        <el-form-item label="排序" prop="departOrder">
          <el-input-number v-model="formData.departOrder" :min="0" :max="20" label="请选择排序"></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="description">
          <el-input type="textarea" v-model="formData.description" maxlength="255" show-word-limit
            placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ParentDepart, getInfo, add, update } from '@/api/sys/dept'
// import treeSelect from '@riophae/vue-treeselect'
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'DeptDialog',
  // components: { treeSelect },
  data() {
    return {
      options: [],
      type: '',
      dialogTitle: '',
      dialogVisible: false,
      formData: {
        departOrder: 0,
      },
      formRules: {
        departName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
        parentId: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
        departOrder: [{ required: true, message: '请选择部门排序', trigger: 'change' }],
      },
      deptOptions: [],
    }
  },

  mounted() { },

  methods: {
    // 获取树
    getParentDepart() {
      ParentDepart().then((res) => {
        if (res.data.code === 200) {
          this.deptOptions = res.data.data
        }
      })
    },
    tenantIdnormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.departId,
        label: node.departName,
        children: node.children,
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.type == 'add') {
            add(this.formData)
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success(res.data.message)
                  this.dialogVisible = false
                  this.$emit('ok')
                } else {
                  this.$message.warning(res.data.message)
                }
              })
              .catch((err) => {
                this.$message.error(err)
              })
          } else {
            update(this.formData)
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success(res.data.message)
                  this.dialogVisible = false
                  this.$emit('ok')
                } else {
                  this.$message.warning(res.data.message)
                }
              })
              .catch((err) => {
                this.$message.error(err)
              })
          }
        }
      })
    },
    add() {
      this.getParentDepart()
      this.type = 'add'
      this.dialogTitle = '添加部门'
      this.dialogVisible = true
      this.resetForm('ruleForm')
    },
    closeDialog() {
      this.dialogVisible = false
    },
    edit(row) {
      this.type = 'edit'
      this.dialogTitle = '编辑部门'
      this.getParentDepart() //重新调用接口，保持数据一致
      getInfo(row.departId)
        .then((res) => {
          if (res.data.code === 200) {
            this.formData = res.data.data
            this.dialogVisible = true
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.formData = {
        departOrder: 0,
      }
    },
  },
}
</script>

<style lang="less" scoped>
.el-cascader {
  width: 100%;
}
</style>
